<template>
	<view class="soupItem" @click="goEdit">

		<view class="head">
			<view class="left">
				<soup-tab-group :soupType="fatherData.soup_type"></soup-tab-group>
			</view>
			<view class="right" @click.stop="goDetail"> <!-- 大容器跳转 子容器也跳转，增加阻止事件冒泡 -->
				<uni-icons type="eye" size="18" color="#999"><text>详情</text></uni-icons>
			</view>
		</view>

		<view class="content" url="/pages_self/soup/edit">
			{{fatherData.content}}
		</view>

		<view class="info">
			<view class="left">
				<view class="time">
					<uni-dateformat :date="fatherData.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
				</view>
			</view>

			<view class="right">
				<view class="group" v-if="fatherData.soup_status==1">
					<view class="every">
						<uni-icons type="heart" color="#a7a7a7" size="16"></uni-icons>
						<text class="font" v-if="fatherData.like_count">{{fatherData.like_count}}</text>
					</view>
					<view class="every">
						<uni-icons type="star" color="#a7a7a7" size="16"></uni-icons>
						<text class="font" v-if="fatherData.collect_count">{{fatherData.collect_count}}</text>
					</view>
					<view class="every">
						<uni-icons type="chatbubble" color="#a7a7a7" size="16"></uni-icons>
						<text class="font" v-if="fatherData.comment_count">{{fatherData.comment_count}}</text>
					</view>
				</view>

				<view :style="{color:soupStateFormat.color}" v-else>
					{{soupStateFormat.text}}
				</view>

			</view>

		</view>

	</view>


</template>

<script setup>
	import {
		computed
	} from "vue";
	import {
		stateFormat
	} from "../../utils/common.js"


	// 接受父页面过来的数据
	const prop = defineProps({
		fatherData: {
			type: Object,
			default: () => {
				return {
					// 数据库样例数据
					collect_count: 0,
					comment_count: 0,
					content: "111",
					from: "111",
					last_modify_date: 1729183905870,
					last_modify_ip: "127.0.0.1",
					like_count: 0,
					publish_date: 1729183905870,
					publish_ip: "127.0.0.1",
					soup_status: 1,
					soup_type: 0,
					view_count: 1,
					_id: "671140a17c8de454cf73bda7"
				}
			}
		},
	})

	// 计算属性
	const soupStateFormat = computed(() => stateFormat(prop.fatherData.soup_status))

	// 点击单个item,跳转到不同页面
	const goEdit = () => {
		uni.navigateTo({
			url: '/pages_self/soup/edit?_id=' + prop.fatherData._id + '&soup_type=' + prop.fatherData.soup_type +
				'&content=' + prop.fatherData.content + '&soup_status=' + prop.fatherData.soup_status + '&from=' + prop
				.fatherData.from + '&reject_reason=' + prop.fatherData.reject_reason
		})
	}

	const goDetail = () => {
		uni.navigateTo({
			url: '/pages/detail/detail'
		})
	}
</script>

<style scoped lang="scss">
	.soupItem {
		border: 1px solid #e4e4e4;
		border-bottom-width: 3px;
		margin-bottom: 40rpx; // 下划线粗点
		border-radius: 15rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			.right {
				font-size: 28rpx;
				color: $text-font-color-3;
				display: flex;
				align-items: center;
				padding: 5rpx 10rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.content {
			padding: 20rpx 0;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 1.7em;
			text-align: justify; // 文字两端对齐

		}

		.info {
			background: #f9f9f9;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: $text-font-color-3;

			.left {}

			.right {
				.group {
					display: flex;
					align-items: center;

					.every {
						margin-left: 20rpx;

						.font {

							font-size: 26rpx;
						}
					}
				}

			}
		}



	}
</style>